
import React from  'react'

// 引入head组件
import Head from 'next/head'
import './index.scss'
// 头部组件
import Header from '../components/header'
// nav栏
import HomeNavList from './home/navList'
// 产品服务
import Product from "./home/product";
// 关于我们
import About from './home/abouts'
// 服务流程
import Service from './home/service'
// 经典案例
import HomeCase from './home/homeCase'
// 新闻中心
import News from './home/news'
// 合作伙伴
import Partner from './home/partner'
// 右侧导航
import Navigation from '../components/navigation'
// 底部组件
import Footer from '../components/footer'
// ant 组件
import { Carousel, WingBlank } from 'antd-mobile';

// redux 数据
import store from '../store'

// api请求
import
{
    getHeadAndTailData,
    getFriendData,
    getHomeArticleData,
    getSlideData,
    getHomeCateData
}
    from '../api/api'

export default class Home extends React.Component{
    constructor(props) {
        super(props);
        let {remUrl} = store.getState()
        this.state = {
            pageData:{
                title: '首页'
            },
            // 控制右侧侧边栏展示隐藏
            displayNav: false,
            // 轮播头指示点高亮样式
            dotActiveStyle:{
                'background': '#22d4fd',
                'width':'20px',
                'height': '10px',
                'borderRadius': '10px'
            },
            navFrag:true,
            // 轮播图
            swiperImg: props.swiperImg,
            remUrl
        }
    }
    static async  getInitialProps(){
        // 轮播图
        let swiperImg = await getSlideData()
        // 底部数据
        let footerData = await getHeadAndTailData()
        // 合作伙伴
        let friendData = await getFriendData()
        //新闻数据
        let homeArticleData = await getHomeArticleData()
        // 经典案例
        let homeCateData = await getHomeCateData()
        return{
            swiperImg: swiperImg.data,
            footerData: footerData.data,
            friendData,
            homeArticleData,
            homeCateData
        }
    }
    render(){
        return(
          <>
              <Head>
                  <meta charSet='utf-8'/>
                  <title>{this.props.footerData.info.index_title}</title>
                  <meta name="keywords" content={this.props.footerData.info.index_keywords} />
                  <meta name="description" content={this.props.footerData.info.index_description}/>
                  <link rel="icon" href={this.props.footerData.web_icon}/>
                  <script src={this.state.remUrl}></script>
              </Head>

              <div className='gp_home' onClick={this.downDisplayNav.bind(this)}>
                  {/*头部*/}
                  <Header changeDisplayNav={this.changeDisplayNav.bind(this)} />

                  {/*轮播图*/}
                  <WingBlank>
                      <Carousel
                          autoplay={true}
                          infinite
                          dotStyle={{background: '#5e5757',width:'10px',height:'10px',margin:'0 6px'}}
                          dotActiveStyle={this.state.dotActiveStyle}
                      >
                          {this.state.swiperImg && this.state.swiperImg.map((item) => (
                              <div
                                  key={item.id}
                                  style={{ display: 'inline-block', width: '100%', height: '7.6rem' }}
                              >
                                  <img
                                      src={item.img}
                                      alt=""
                                      style={{ width: '100%', height: '100%', verticalAlign: 'top' }}
                                      onLoad={() => {
                                          window.dispatchEvent(new Event('resize'));
                                          this.setState({ imgHeight: 'auto' });
                                      }}
                                  />
                              </div>
                          ))}
                      </Carousel>
                  </WingBlank>
                  {/*nav栏*/}
                  <HomeNavList />
                  {/*产品服务*/}
                  <Product />
                  {/*关于我们*/}
                  <About />
                  {/*服务流程*/}
                  <Service />
                  {/*经典案例*/}
                  <HomeCase projectCateData={this.props.homeCateData.data}/>
                  {/*新闻中心*/}
                  <News homeArticleData={this.props.homeArticleData.data}/>
                  {/*合作伙伴*/}
                  <Partner friendData={this.props.friendData.data} />
                  {/*右侧导航*/}
                  <Navigation navFrag={this.state.navFrag} displayNav={this.state.displayNav} />
              </div>
              {/*底部*/}
              <Footer footerData={this.props.footerData} />
          </>
        )
    }
    downDisplayNav(){
        this.state.displayNav && (
            this.setState({
                displayNav: false
            })
        )
    }
    changeDisplayNav(){
        this.setState({
            displayNav: !this.state.displayNav,
            navFrag: false
        })
    }
}

